<template>
  <div class="order-detail-container">
    <el-card>
      <template #header>
        <h3>工单详情</h3>
      </template>
      <div class="order-detail">
        <h4>客户名字： {{ orderDetail?.customer_name }}</h4>
        <h4>客户手机号： {{ orderDetail?.customer_address }}</h4>
        <h4>问题描述： {{ orderDetail?.user_claim }}</h4>
        <h4>创建时间： {{ orderDetail?.createdAt }}</h4>
        <h4>预约时间： {{ orderDetail?.appointment_time }}</h4>
        <h4>站点id： {{ orderDetail?.station_id }}</h4>
        <h4>维修员id： {{ orderDetail?.station_id }}</h4>
        <h4>检查结果： {{ orderDetail?.repair_inspection }}</h4>
        <h4>维修结果： {{ orderDetail?.repair_result }}</h4>
        <h4>服务状态： {{ orderDetail?.status }}</h4>
        <h4>服务反馈： {{ orderDetail?.feedback }}</h4>
      </div>
    </el-card>
    <el-card>
      <template #header>
        <h3>工单事件</h3>
      </template>
      <div class="order-events">
        <el-timeline>
          <el-timeline-item v-for="(event, index) in orderEvents" :key="index">
            <el-card>
              <div class="event-content">
                {{ event }}
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getWorkOrdersByOrderId } from '@/api/workOrder' // 按状态获取工单接口
//引入router
const route = useRoute()

const orderId = ref(null)
const orderEvents = ref([]) // 工单事件
const orderDetail = ref(null) // 工单详情
// 页面加载时获取订单ID
const GetOrderDetail = async () => {
  try {
    const res = await getWorkOrdersByOrderId(orderId.value)
    // 过滤res.data中的events字段
    const { events, ...list } = res.data
    orderEvents.value = events
    orderDetail.value = list
    console.log(orderDetail.value)
  } catch (error) {
    console.error('错误', error)
  }
}
onMounted(() => {
  orderId.value = route.params.id
  GetOrderDetail()
})
</script>
<style scoped>
.order-detail-container {
  display: flex;
  justify-content: space-around;
}
</style>
